<template>
  <div class="wrap">
    <div class="swiperContaner">
      <van-swipe :autoplay="3000">
        <van-swipe-item  v-for="(image, index) in images" :key="index"> 
          <img :src="image" width="100%" @click="look"/>  
        </van-swipe-item>
      </van-swipe>
       <img src="@/assets/point.png" alt="" class="point" @click="showOptions = true" />
    </div>
    <div class="bottomWrap">
      <div class="totalCount">
        <div class="price"><em>￥</em>{{ resGoodsDetail.price }}</div>
        <div class="commentCount">
          <em class="commentNum">销量：{{ resGoodsDetail.saleNum }}</em>
        </div>
        <div class="addCar" @click="show = true">加入购物车</div>
      </div>
      <div class="goodsTitle">{{ resGoodsDetail.goodsName }}</div>
      <div class="greyLine"></div>
      <div class="goodsInfo">
        <div class="infoTitle">商品详情</div>
        <img :src="$imgUrl + resGoodsDetail.listImgUrl" alt="" class="goodsImg" />
        <div class="infoText" v-html="resGoodsDetail.detailsContent"> </div>
      </div>
      <div style="height: 100px; width: 100%"></div>
    </div>
    <div class="shopCarBottom">
      <div class="shoppingCar">
        <img
          src="@/assets/shoppingCar.png"
          alt=""
          class="shoppingCarImg"
          @click="showCar = true"
        />
        <em class="shoppingCarNum">{{ carCountData.totalCount }}</em>
      </div>
      <div class="numWrap">
        <div class="carTotalNum">￥{{ carCountData.totalPrice }}</div>
        <div class="totalNum">
          共{{ carCountData.totalCount }}件&nbsp;&nbsp;&nbsp;&nbsp;需50元起送
        </div>
      </div>
      <div type="" class="goCount" @click="goCountJump">去结算</div>
    </div>
    <!-- 遮罩层-加入购物车： -->
    <div class="maskWrap" v-if="show">
      <div class="maskBg" @click="show = flase"></div>
      <div class="chooseNumWrap">
        <div class="productItem productItem2">
          <img
            :src="$imgUrl +specsChooseData.imageUrl"
            alt=""
            class="proPosterLeft proPosterLeft2"
          />
          <div class="proIntroRight3">
            <em class="price2 price3">￥{{specsChooseData.price }}</em>
            <p class="pleaseChoosekinds">请选择规格</p>
          </div>
        </div>
        <div class="kindsWrap">
          <div class="kindsTitle">规格分类</div>
          <div class="kindsList">
            <div
              class="kindsItem"
              :class="{ kindsItemActive: specsId == item.id }"
              v-for="(item, index) in resGoodsDetail.specsList"
              :key="index"
              @click="chooseSpecsItem(item)"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="kindsTitle">购买数量</div>
          <div class="kindsList">
            <van-stepper
              v-model="addCarNum"
              theme="round"
              button-size="18"
              disable-input
              @change="onChange(item)"
            />
          </div>
          <div class="sureAdd" @click="getAddCartGoods">确认</div>
        </div>
      </div>
    </div>
     <!-- 遮罩层-打开购物车： -->
    <div class="maskWrap" v-if="showCar">
      <div class="maskBg" @click="showCar = flase"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">
          <div class="maskTitleleft">{{ resGoodsDetail.goodsName }}</div>
          <div class="maskTitleRight" @click="clearShopCarAll()">清空</div>
        </div>
        <div class="productListWrap">
          <div v-if="resCarGoodsList.length > 0">
            <div
              class="productItem"
              v-for="(item, index) in resCarGoodsList"
              :key="index"
            >
              <img :src="$imgUrl+item.listImgUrl" alt="" class="proPosterLeft" />
              <div class="proIntroRight2">
                <p class="proTitle2">{{ item.goodsName }}</p>
                <p class="saleNum2">{{ item.specsName }}</p>
                <div class="priceWrap2">
                  <em class="price2">￥{{ item.totalPrice }}</em>
                  <van-stepper
                    v-model="item.payNum"
                    theme="round"
                    button-size="18"
                    disable-input
                    @change="onChange(item)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div style="font-size: 14px; color: #666" v-else>购物车是空的，赶紧加购吧~</div>
        </div>
        <div style="height: 70px; width: 100%"></div>
        <div class="shopCarBottom">
          <div class="shoppingCar">
            <img src="@/assets/shoppingCar.png" alt="" class="shoppingCarImg" />
            <em class="shoppingCarNum">{{ carCountData.totalCount }}</em>
          </div>
          <!-- <div class="numWrap">
            <div class="carTotalNum">￥{{ carCountData.totalPrice }}</div>
            <div class="totalNum">
              共10件&nbsp;&nbsp;&nbsp;&nbsp;需20元起送
            </div>
          </div> -->
          <div type="" class="goCount" @click="goCountJump">去结算</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Dialog,Stepper  } from "vant"; 
import { apiGetPlatformGoodsDetails,
  apiPlatformAddCartGoods,
  apiPlatformClearCartGoods,
  apiPlatformGetCartGoodsList,
  apiPlatformUpdateCartGoodsNum, } from "@/request/api"; // api接口
  import { ImagePreview } from 'vant';

export default {
  name: "App",
  data() {
    return {
      GoodsId: this.$route.query.GoodsId,
      resGoodsDetail: "", //商品详情
      show: false,
      showCar:false,
      images: [], //商品banner图片
      specsChooseData:'',//选择的商品规格
      specsId: "",//选择的商品规格id
      addCarNum: "1", //加入购物车选择的数量
      resCarGoodsList: [], //购物车列表数据
      carCountData: {
        totalCount: 0, //总件数
        totalPrice: 0, //总价格
      },
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#fff");
    this.getGoodsDetails();
    this.getCartGoodsList();
  },
  methods: {
    // 查看图片
    look(){
     ImagePreview(this.images)
    },
    //商品详情：
    getGoodsDetails() {
      apiGetPlatformGoodsDetails({
        id: this.GoodsId,
      }).then((res) => {
        this.resGoodsDetail = res.data;
        this.specsChooseData = this.resGoodsDetail.specsList[0]
        this.specsId = this.resGoodsDetail.specsList[0].id;
        var bannerImgUrl = this.resGoodsDetail.bannerImgUrl.split(",");
        bannerImgUrl.map((item) => {
          this.images.push(this.$imgUrl + item);
        });
      });
    },
    //添加商品到购物车打开选择规格mask
    showAddCarMask(i) {
      this.getGoodsDetails(i);
      this.show = true;
    },
    //添加商品到购物车-确认动作
    getAddCartGoods() {
      apiPlatformAddCartGoods({
        goodsId: Number(this.GoodsId),
        payNum: Number(this.addCarNum),
        specsId: Number(this.specsChooseData.id),
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("加入成功!");
          this.addCarNum = 1
          this.show = false;
          this.getCartGoodsList(); //请求购物车数据
        }
      });
    },
    //选择规格
    chooseSpecsItem(data) {
      this.specsId = data.id
      this.specsChooseData = data;
    },
    //请求购物车列表：
    getCartGoodsList() {
      this.carCountData.totalCount = 0;
      this.carCountData.totalPrice = 0;
      apiPlatformGetCartGoodsList({ }).then((res) => {
        this.resCarGoodsList = res.data;
        this.resCarGoodsList.map((item) => {
          this.carCountData.totalCount = this.carCountData.totalCount + item.payNum;
          this.carCountData.totalPrice = this.carCountData.totalPrice + item.totalPrice;
        });
        console.log("购物车数据", this.resCarGoodsList);
      });
    },
    //清空购物车：
    clearShopCarAll() {
      apiPlatformClearCartGoods({ }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("已清空成功!");
          this.showCar = false;
          this.getCartGoodsList(); //请求购物车数据
        }
      });
    },
    //修改购物车的数量：
    onChange(data) {
      console.log('修改购物i车',data)
      apiPlatformUpdateCartGoodsNum({
        goodsId: Number(this.GoodsId),
        payNum: Number(this.addCarNum),
        specsId: Number(data.specsId),
      }).then((res) => {
        this.addCarNum = 1
        this.getCartGoodsList();
      });
    },
    //去结算
    goCountJump() {
      if(this.resCarGoodsList.length==0){
        this.$toast.fail('请选购商品')
        return
      }
      this.$router.push({
        path: "/pages/bOrderSure",
        query: {
          //传递参数
          GoodsId: this.GoodsId
        },
      });
    },
  },
  created() {},
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Dialog .name]: Dialog ,
    [Stepper.name]:Stepper,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>

<style scoped>
.wrap {
}
.swiperContaner .van-swipe {
  margin-top: 15px;
  margin-bottom: 20px;
  width: 100%;
  height: 260px;
  background: #181818;
  box-shadow: 0px 6px 8px 0px rgba(148, 148, 148, 0.16);
}
.swiperContaner > img {
  width: 100%;
  height: auto;
}
.van-swipe-item {
  /* height: 150px; */
}
.van-swipe-item img {
  width: 100%;
  /* max-height: 155px; */
}
.greyLine {
  height: 5px;
  width: 100%;
  background-color: #f2f4fa;
}
.bottomWrap {
  width: 100%;
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  top: 275px;
  background: #fafbfc;
  padding-top: 10px;
}
.totalCount {
  overflow: hidden;
  padding: 0px 20px;
}
.price {
  float: left;
  color: #ff4646;
  font-size: 24px;
  margin-top: 4px;
}
.price em {
  font-size: 12px;
}

.commentCount {
  float: left;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  margin-top: 13px;
}
.commentNum {
  float: left;
  margin-left: 20px;
}
.saleNum {
  margin-left: 20px;
}
.addCar {
  float: right;
  background: #f48f5b;
  border-radius: 9px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 4px 15px;
  margin-top: 10px;
}
.goodsTitle {
  font-size: 16px;
  font-weight: 500;
  color: #181818;
  padding: 14px 20px;
}
.salePrice {
  font-size: 9px;
  font-weight: 400;
  color: #ff5252;
  /* padding: 3px 8px; */
  border: 1px solid #ff5252;
  border-radius: 7px;
  width: 100px;
  margin-left: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.salePrice em {
  font-style: normal;
}
.salePrice i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.goodsInfo {
  padding: 20px;
}
.infoTitle {
  font-size: 12px;
  font-weight: 300;
  color: #666666;
  line-height: 20px;
}
.goodsImg {
  border-radius: 20px;
  width: 100%;
  margin: 20px 0px;
}
.infoText {
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  line-height: 16px;
}
.productListWrap {
  width: calc(100% - 30px);
  margin: 20px auto;
}
.productItem {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.proIntroRight2 {
  width: 70%;
}
.proTitle2 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0px;
}
.saleNum2 {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  text-align: left;
  margin-bottom: 0px;
}
.priceWrap2 {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}
.price2 {
  font-size: 10px;
  font-weight: bold;
  color: #ff4646;
}
.addShoppingCar2 {
  padding: 5px 8px;
  height: 18px;
  line-height: 18px;
  background: #f48f5b;
  border-radius: 15px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0;
}
.chooseNumWrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.maskTitle {
  height: 50px;
  line-height: 50px;
}
.maskTitleleft {
  float: left;
  font-size: 14px;
  color: #000;
  margin-left: 40%;
}
.maskTitleRight {
  float: right;
  color: #666;
  margin-right: 15px;
}
.productItem2 {
  margin-bottom: 0px;
}
.proPosterLeft {
  width: 24%;
  height: 75px;
}
.proPosterLeft2 {
  width: 18%;
    /* height: auto; */
  height: 75px;
  padding: 15px;
}
.proIntroRight3 {
  width: 70%;
  text-align: left;
  margin-top: 15px;
}
.pleaseChoosekinds {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}
.kindsWrap {
  text-align: left;
  width: calc(100% - 30px);
  margin: 0 auto;
}
.kindsTitle {
  border-top: 1px solid rgb(212, 210, 210);
  font-size: 14px;
  padding-top: 10px;
  margin-bottom: 10px;
}
.kindsList {
 /* display: flex;
  justify-content: space-between; */
  margin-bottom: 20px;
  overflow: hidden;
}
.kindsItem {
  background-color: #999999;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  float: left;
  margin-right: 10px;
  margin-bottom: 8px;
}
.kindsItemActive {
  background-color: #000;
}
.sizeImg {
  float: left;
  width: 50px;
  border-radius: 5px;
}
.sizeRight {
  float: left;
  margin-left: 10px;
}
.sizeName {
  font-size: 14px;
  margin-top: 5px;
}
.sizeCount {
  font-size: 12px;
  margin-top: 5px;
}
.sizePrice {
}
.sizeNum {
  padding-left: 10px;
}
.sureAdd {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  margin: 25px 0px;
}
.point {
  display: inline-block;
  width: 23px !important;
  height: 5px !important;
  position: fixed;
  right: 20px;
  top: 30px;
}
.optionsItem {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  color: #000;
  font-size: 14px;
  text-align: center;
}
.dele {
  background-color: #eee;
  border-radius: 20px;
  width: 90%;
  margin: 5px auto;
  height: 40px;
  line-height: 40px;
}
.shopCarBottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 69px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
}
.shoppingCar {
  float: left;
  position: relative;
  margin: 12px 20px;
}
.shoppingCarImg {
  width: 29px;
  height: auto;
  position: absolute;
}
.shoppingCarNum {
  display: inline-block;
  /* width: 14px;
  height: 14px;
  line-height: 14px; */
  background: #ff4646;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 25px;
  text-align: center;
  padding: 3px 5px;
}
.numWrap {
  float: left;
  margin-left: 36px;
}
.carTotalNum {
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  color: #ff4646;
  margin: 10px 0px 5px 0px;
}
.totalNum {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 300;
  color: #999999;
}
.goCount {
  float: right;
  margin: 8px 15px 0px 0px;
  width: 95px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
